<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找日志</title>
</head>
<body>
<h1>日志查找</h1>
<form id="logFileForm">
    <label for="path">输入完整日志地址:</label>
    <input type="text" id="path" name="path">
    <label for="query">查询内容:</label>
    <input type="text" id="query" name="query">
    <button type="button" onclick="queryLogFile()">查找</button>
    <button type="button" onclick="refreshContent()">重置</button>
</form>
<div id="logContent"></div>

<script>
    let debounceTimer;
    function queryLogFile() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            const path = document.getElementById('path').value;
            const query = document.getElementById('query').value;
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        document.getElementById('logContent').innerHTML = xhr.responseText;
                    } else {
                        document.getElementById('logContent').innerHTML = 'Error fetching log file content.';
                    }
                }
            };
            xhr.open('POST', '/logs/query/result');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 将路径和查询内容编码后一起发送
            xhr.send('path=' + encodeURIComponent(path) + '&query=' + encodeURIComponent(query));
        }, 200);
    }

    function refreshContent() {
        // 刷新页面，重定向到当前页面
        window.location.reload();
    }
</script>
</body>
</html>
